<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f(x) {
            var div = document.getElementById("div");
            if (x.style.color != "red") {
                if (div.innerHTML.indexOf("筛选条件") != -1) {
                    div.innerHTML += " <span style='color: red' onclick=\"f(this)\">" + x.innerHTML + "</span>"
                } else {
                    div.innerHTML = "筛选条件: <br/> <span  style='color: red' onclick=\"f(this)\">" + x.innerHTML + "</span>"
                }
            } else {
                var span = document.getElementsByTagName("span");
                for (var i = 0; i < span.length; i++) {
                    if (span[i].style.color != "red" && x.getElementsByTagName("font")[0].className == span[i].getElementsByTagName("font")[0].className) {
                        span[i].parentNode.innerHTML += " <span  onclick=\"f(this)\">" + x.innerHTML + "</span>";
                        break;
                    }
                }
            }
            var s = x.parentNode.getElementsByTagName("span");
            for (var i = 0; i < s.length; i++) {
                if (s[i].innerHTML == x.innerHTML) {
                    s[i].getElementsByTagName("font")[0].innerHTML = "";
                }
            }
            var b = true;
            for (var i = 0; i < s.length; i++) {
                if (x.style.color == "red" && s[i].getElementsByTagName("font")[0].innerHTML != "") {
                    b = false;
                }
            }
            if (b) {
                if (x.style.color == "red") {
                    div.innerHTML = "";
                }
            }
        }
    </script>
</head>
<body>
<div id="div"></div>
<div id="1">
    尺寸:
    <br/>
    <span onclick="f(this)"><font class="cc">S(小号)</font></span>
    <span onclick="f(this)"><font class="cc">M(中号)</font></span>
    <span onclick="f(this)"><font class="cc">L(大号)</font></span>
    <span onclick="f(this)"><font class="cc">XL(加大号)</font></span>
    <span onclick="f(this)"><font class="cc">XXL(加加大号)</font></span>
</div>
<div id="2">
    颜色:
    <br/>
    <span onclick="f(this)"><font class="ys">白色</font></span>
    <span onclick="f(this)"><font class="ys">黑色</font></span>
    <span onclick="f(this)"><font class="ys">黄色</font></span>
    <span onclick="f(this)"><font class="ys">橙色</font></span>
    <span onclick="f(this)"><font class="ys">蓝色</font></span>
    <span onclick="f(this)"><font class="ys">红色</font></span>

</div>
<div id="3">
    价格:
    <br/>
    <span onclick="f(this)"><font class="jg">50</font></span>
    <span onclick="f(this)"><font class="jg">51-100</font></span>
    <span onclick="f(this)"><font class="jg">201-300</font></span>
    <span onclick="f(this)"><font class="jg">301-400</font></span>
    <span onclick="f(this)"><font class="jg">400以上</font></span>
</div>
</body>
</html>